<template>
  <div class="personal">
      <!--头部设置-->
      <div class="top">
          <div>
              <router-link to=""><i class="iconfont icon-shezhi"></i></router-link>
              <router-link to=""><i class="iconfont icon-Group-"></i></router-link>
              <router-link to=""><i class="iconfont icon-xiangling"></i></router-link>
          </div>
      </div>
      <!-- 头部  登录 -->
      <div class="header">
          <div>
              <router-link to="">
                  <img :src="top_login.img" alt="">
              </router-link>
          </div>
          <div>
              <div>
                  <p>{{username}}</p>
                  <!--登录/注册按钮-->
                  <router-link v-if="Show" to="/login">登录 / 注册</router-link>
                  <router-link v-if="!Show" @click.native="Close" to="">退出登录</router-link>
              </div>
          </div>
      </div>
      <!-- 头部  我的订单 -->
      <div class="order">
          <div>
              <i class="iconfont icon-wodedingdan"></i>
              <span>我的订单</span>
          </div>
          <router-link @click.native="all" to="">查看全部订单 <span>&gt;&gt;</span></router-link>
      </div>
      <!-- 待付款 -->
      <div class="nav">
          <!--待付款件数-->
          <span v-if="$store.state.list.length">{{$store.state.list.length}}</span>
          <!--待出行件数-->
          <span v-if="$store.state.paid.length">{{$store.state.paid.length}}</span>
          <router-link @click.native="Num(index)" :key="index" v-for="(value,index) in Nav"  to="">
              <i :class="value.icon"></i>
              <span>{{value.name}}</span>
          </router-link>
      </div>
      <!-- 分割线  -->
      <div class="hr"></div>
      <!-- 签到记录 -->
      <div class="sign">
          <div>
              <i class="iconfont icon-qiandao"></i>
              <span>{{sign_nav.name}}今日已签</span>
          </div>
          <router-link to="">我的签到记录 <span>&gt;&gt;</span></router-link>
      </div>
      <!-- 分割线  -->
      <div class="hr"></div>
      <!-- 我的旅行 -->
      <div class="travel">
          <div>
              <div>
                  <i class="iconfont icon-xiangji"></i>
                  <span>我的旅行</span>
              </div>
              <p>随时随地分享我的旅行</p>
          </div>
          <div>
              <router-link to="">开启分享我的旅行</router-link>
          </div>
      </div>
      <!-- 分割线  -->
      <div class="hr"></div>
      <!-- 更多功能 -->
      <div class="more">
          <div>
              <i class="iconfont icon-gongneng-copy"></i>
              <span>更多功能</span>
          </div>
      </div>
      <!--底部  -->
      <div class="footer">
          <router-link v-for="(value,index) in more_fun" to="">
              <i :class="value.icon" :style="{color:value.Color}"></i>
              <span>{{value.name}}</span>
          </router-link>
      </div>
      <Footer/>
  </div>
</template>
<style scoped src="../../public/css/personal.css"></style>

<script>

//  引入公共头部尾部组件
import Footer from '@/components/footer.vue'

export default {
  data(){
      return {
          is_Hide:false,
          is_Show:false,
          //  顶部登录注册头像
          top_login:{},
          //  我的订单
          Nav:[
              {"id":1,"icon":"iconfont icon-qianbao1","name":"待付款"},
              {"id":2,"icon":"iconfont icon-chuhang","name":"待出行"},
              {"id":3,"icon":"iconfont icon-pinglun","name":"待评价"},
              {"id":4,"icon":"iconfont icon-qianbao","name":"退款/售后"}
          ],
          // Nav:[],
          //  签到记录导航
         sign_nav:{},

          //  更多功能
          more_fun:[],
          //  用户名
          username:"",
          //  控制登录和退出登录按钮
          Show:"",
      }
    },
    components: {
        Footer
    },
    methods:{
        Num(index){
            this.$store.commit('Gnum',index);
            this.$router.push('/order');
        },
        //  全部订单
        all(){
            this.$store.state.num=0;
            this.$router.push('/order');
        },
        //  点击退出登录
        Close(){
            //  弹框
            var confirm1=confirm("确定退出登录？");
            if (confirm1){
                //  更新购物车，已付款信息到数据库
                this.$axios.post('http://118.178.85.166:3000/login',{username:localStorage.getItem('user'),list:localStorage.getItem('list'),paid:localStorage.getItem('paid'),met:4}).then((data)=>{
                    //  全部数据
                    let Data=data.data;
                    if (Data.code==200){
                        localStorage.removeItem('list');
                        localStorage.removeItem('paid');
                        this.$store.state.list=[];
                        this.$store.state.paid=[];
                    }
                }).catch((err)=>{
                    console.log('这是点击退出登陆按钮中的错误:'+err);
                });
                //  确定则清除本地user名，
                localStorage.removeItem('user');
                //  文本替换为未登录
                this.username='你还没有登录~';
                // 按钮变成true  显示登录/注册
                this.Show=true;
            }
        }
    },
    computed:{

    },
    mounted(){
      this.Show=this.$store.state.Show;
      //  本地存储user不为空  将用户名替换为存储的用户名
      if (localStorage.getItem('user')!==null){
          this.$store.state.username=localStorage.getItem('user');
          //  按钮变成  退出登录
          this.Show=false
      } else {
          //  按钮变成  登录/注册
          this.Show=true;
          //  文本变为 没有登陆
          this.$store.state.username='你还没有登录~';
      }
      //  vuex 同步 用户名
      this.username=this.$store.state.username;
        this.$axios.get('http://118.178.85.166:3000/personal').then((data)=>{
            //  全部数据
            let Data=data.data[0];
            //  顶部登录注册头像
            this.top_login=JSON.parse(Data.top_login);
            //  签到记录导航
            this.sign_nav=JSON.parse(Data.sign_nav);
            //  更多功能
            this.more_fun=JSON.parse(Data.more_fun);

        }).catch((err)=>{
            console.log('这是personal.vue中的错误:'+err);
        });

    },
}

</script>

